import React from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Layout,theme } from 'antd';
import './Home.css'
import Header from '../../components/Header/Header';
import MenuCom from '../../components/MenuCom/MenuCom';
import BreadcrumbCom from '../../components/BreadcrumbCom/BreadcrumbCom';
import FooterCom from '../../components/Footer/FooterCom';
import MainInfo from '../MainInfo/MainInfo'
import UserInfo from '../UserInfo/UserInfo'
import { Outlet,useLocation } from 'react-router-dom';
import {useSelector} from 'react-redux';

const { Content, Sider } = Layout

const Home = () => {
  const isauth = useSelector(state => state.user?.username) || null
  const items2 = [{
    key: "/home/main",
    icon: React.createElement(UserOutlined),
    label: "概览"
  }, {
    key: "/user",
    icon: React.createElement(LaptopOutlined),
    label: "用户管理",
    children: [
    isauth =='admin'?{
      key: "/user/list",
      label: "成员管理"
    }: null
    , {
      key: "/user/auth",
      label: "权限设置"
    }, {
      key: "sub23",
      label: "菜单三"
    }, {
      key: "sub24",
      label: "菜单四"
    }, {
      key: "sub25",
      label: "菜单五"
      }]
  }]
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  let mode = 'inline',
      index = '1'
  const location = useLocation()
  // console.log('location',location.pathname)
  return (
    <div>
       <Layout>
        <Header></Header>
        <Content style={{padding: '0 50px'}}>
          <BreadcrumbCom></BreadcrumbCom>
          <Layout style={{padding: '24px 0', background: colorBgContainer}}>
            <Sider style={{background: colorBgContainer}}width={200}>
              <MenuCom style={{height: '100%'}} mode={mode} defaultSelectedKeys={[index]} items={items2}></MenuCom>
            </Sider>
            <Content style={{padding: '0 24px',minHeight: 500,}}>
              <Outlet/>
            </Content>
          </Layout>
        </Content>
        <FooterCom></FooterCom>
      </Layout>
    </div>
  );
};

export default Home;